import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'
import WeUI from 'react-weui';
import 'whatwg-fetch'
const {
    CellFooter,
    CellsTitle,
    Cells,
    Cell,
    CellBody,
    Input,
    ButtonArea,
    Button,
    TextArea,
    Toptips,
    Toast,
    NavBar,
    NavBarItem,
    Tab} = WeUI;
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/CreateTeamStyle.css';
import $ from 'jquery';
export default class EditDepartment extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.state = {
            showToptips: false,
            showLoading: false,
            showToast: false,
            toastTimer: null,
            topTipsMsg: "服务器异常！",
            tostMsg:"",
            teamGroupId:this.props.location.query.teamGroupId, //部门id,
            teamId:this.props.location.query.teamId,
            groupName:"",
        }
    }

    showToast() {
        this.setState({showToast: true});
        this.state.toastTimer = setTimeout(()=> {
            this.setState({showToast: false});
            window.location.hash = "/TeamInfoEdit?teamId="+this.state.teamId+"";
        }, 2000);
    }

    showWarn() {
        this.setState({showToptips: true, showLoading: false,});

        this.state.warnTimer = setTimeout(()=> {
            this.setState({showToptips: false});
        }, 2000);
    }

    componentWillMount() {
        this.getGroupUserList();
    }

    componentDidMount() {

    }
    LeftClick() {
    }



    //获取部门信息
    getGroupUserList(){
        //获取团队详情
        let self = this;
        fetch(getHost() + "/team/group/" + this.state.teamGroupId,{
            method: 'get',
            credentials: 'include',
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    self.setState({
                        groupName:data.data.teamGroupName,
                    })
                } else {
                    this.state.topTipsMsg = data.error.message;
                    self.showWarn();
                }
            }).catch(e => {
            self.showWarn();
        });
    }




    //用户输入
    handleGroupName(e){
        this.setState({
            groupName:e.target.value,
        })
    }
    //确认保存
    confirmSave(){
        let self = this;
        let fromData = new FormData();
        fromData.append("name",this.state.groupName);
        fetch(getHost() + "/team/group/modify/" + this.state.teamGroupId, {
            method: 'POST',
            credentials: 'include',
            body:fromData
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    this.state.tostMsg = "修改成功";
                    self.showToast()
                } else {
                    this.state.topTipsMsg = data.error.message;
                    self.showWarn();
                }
            }).catch(e => {
            self.showWarn();
        });
    }

    //删除
    confirmDelete(){
        //获取团队详情
        let self = this;
        fetch(getHost() + "/team/group/" + this.state.teamGroupId, {
            method: 'DELETE',
            credentials: 'include',
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    this.state.tostMsg = "删除成功";
                    self.showToast()
                } else {
                    this.state.topTipsMsg = data.error.message;
                    self.showWarn();
                }
            }).catch(e => {
            self.showWarn();
        });
    }

    render() {
        return (
            <div style={{height: '100%'}}>
                <NavigationBar Title="部门管理" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <CellsTitle>请输入部门名称</CellsTitle>
                <Cells style={{background: "white"}}>
                    <Cell>
                        <CellBody style={{height:"2.4rem"}}>
                            <div className="department_title">部门</div>
                            <Input className="department_input" placeholder="请输入部门名称" maxLength="20"
                                   value={this.state.groupName} onChange={this.handleGroupName.bind(this)} />
                        </CellBody>
                        <CellFooter/>
                    </Cell>
                </Cells>
                <div className="button_box">
                    <ButtonArea direction="horizontal">
                        <Button  className="confirmSave_btn" onClick={this.confirmSave.bind(this)}>确认保存</Button>
                    </ButtonArea>
                    <ButtonArea direction="horizontal">
                        <Button type="default" className="confirmSave_btn" onClick={this.confirmDelete.bind(this)}>删除部门</Button>
                    </ButtonArea>
                </div>
                <Toast icon="success-no-circle" show={this.state.showToast}>{this.state.tostMsg}</Toast>
                <Toptips type="warn" show={this.state.showToptips}>
                    {this.state.topTipsMsg}
                </Toptips>
            </div>
        )
    }
}